<template>
  <el-form label-width="auto" class="searchBarWrap">
    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :md="19" :lg="20" :xl="21">
        <div :class="{ searchBarHide: isStow }">
          <slot />
        </div>
      </el-col>
      <el-col v-permission="permissionCode" :xs="24" :sm="24" :md="5" :lg="4" :xl="3" style="padding: 0">
        <div class="collapseButtonWrap" :class="{ 'hidden1920': hidden1920 }" @click="isStow = !isStow">
          <i :class="{ 'el-icon-arrow-up': !isStow, 'el-icon-arrow-down': isStow }" />
        </div>
        <el-button type="primary" @click="$emit('handleQuery')">查询</el-button>
        <el-button @click="$emit('handleResetQuery')">重置</el-button>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
export default {
  props: {
    permissionCode: {
      type: String,
      default: ''
    },
    hidden1920: { // 是否在1920下隐藏按钮  比如在xl是2行，在lg是3行这种场景
      type: [Boolean, String],
      default: false
    }
  },
  data() {
    return {
      isStow: false
    };
  }
};
</script>

<style lang="scss" scoped>
@media screen and (min-width: 1920px) {
  .hidden1920 {
    display: none;
  }
}
</style>
